<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	template="../../Template/TemplateAdmin.xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">


	<ui:define name="title">
		Trang Quản lý Tài Khoản
  	</ui:define>


	<ui:define name="content">

		<!-- Content -->
		<div id="MainPanel" align="left">

			<div class="ContentPart">
				<h1 class="ContentPartTitle" align="center">TRANG QUẢN LÝ TÀI
					KHOẢN</h1>
			</div>
			<div class="ContentPart">
				<h3 class="ContentPartHeader">Thao tác</h3>
				<div class="ContentPartContent">
					<div id="rightAction" align="right">
						<h:commandLink immediate="true" action="#"
							outcom="TrangQuanLyTaiKhoan">
							<div class="actionLargeButton" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_addLarge.png" alt="Thêm" />
								<div class="buttonCaption">Thêm</div>
							</div>
						</h:commandLink>
						<h:commandLink immediate="true"
							action="#{quanLyTaiKhoanBean.LietKeToanBo()}">
							<div class="actionWideButtonRight" align="center">
								<img class="buttonImage imgNoBackgroundBorder"
									src="../../Images/Icon/icon_lietKeLarge.png" alt="Liệt kê" />
								<div class="buttonCaption">Liệt kê toàn bộ</div>
							</div>
							<f:ajax render="tableContent" />
						</h:commandLink>
					</div>
					<div id="leftAction">
						<div class="ins">Tìm kiếm tài khoản</div>
						<div id="Search">
							<h:inputText id="inputTim" class="txtField" type="text"
								value="#{quanLyTaiKhoanBean.chuoiTimKiem}" />
							<h:commandLink action="#{quanLyTaiKhoanBean.TimKiem()}"
								outcom="TrangQuanLyTaiKhoan">
								<div id="btSearch">Tìm</div>
							</h:commandLink>
						</div>
						<hr />
						<div class="ins">Liệt kê tài khoản:</div>
						<div class="Filter">
							<!-- &nbsp;&nbsp;  -->
							<label for="cbbNhomSanPham">Kí tự bắt đầu: </label>

							<h:selectOneMenu name="cbbKiTuBatDau" id="cbbKiTuBatDau"
								class="combobox" value="#{quanLyTaiKhoanBean.kiTuBatDau}">
								<f:selectItem itemValue="-1" itemLabel="Tất cả" />
								<f:selectItems value="#{quanLyTaiKhoanBean.lstKiTuBatDau}"
									var="kiTu" itemLabel="#{kiTu}" itemValue="#{kiTu}" />
							</h:selectOneMenu>
							<h:commandLink
								action="#{quanLyTaiKhoanBean.LietKeTheoKiTuBatDau()}"
								outcom="TrangQuanLyTaiKhoan">
								<div id="btFilter">Liệt kê</div>
							</h:commandLink>
						</div>
					</div>
				</div>
			</div>
			<!-- Content -->

			<div class="ContentPart">
				<h3 class="ContentPartHeader">Danh sách Tài khoản</h3>
				<h:panelGroup id="tableContent">
					<h:dataTable value="#{quanLyTaiKhoanBean.lstTaiKhoan}" var="tk"
						styleClass="tableDulieu"
						rendered="#{not empty quanLyTaiKhoanBean.lstTaiKhoan}"
						rowClasses="rowLe,rowChan">

						<ui:param name="index"
							value="#{quanLyTaiKhoanBean.lstTaiKhoan.indexOf(tk)}" />

						<h:column>
							<f:facet name="header">STT</f:facet>
							<h:outputText value="#{index + 1}" />
						</h:column>
						<h:column>
							<f:facet name="header">Mã Tài khoản</f:facet>
							<h:commandLink action="#">#{tk.mataikhoan}</h:commandLink>
						</h:column>
						<h:column>
							<f:facet name="header">Username</f:facet>
							<h:commandLink action="#">#{tk.tendangnhap}</h:commandLink>
						</h:column>
						<h:column>
							<f:facet name="header">Họ tên</f:facet>
							<h:outputText value="#{tk.hoten}" />
						</h:column>
						<h:column>
							<f:facet name="header">Email</f:facet>
							<h:outputText value="#{tk.email}" />
						</h:column>
						<h:column>
							<f:facet name="header">Ngày sinh</f:facet>
							<h:outputText value="#{tk.ngaysinh}" />
						</h:column>
						<h:column>
							<f:facet name="header">Địa chỉ</f:facet>
							<h:outputText value="#{tk.diachi}" />
						</h:column>
						<h:column>
							<f:facet name="header">Số điện thoại</f:facet>
							<h:outputText value="#{tk.sodienthoai}" />
						</h:column>
						<h:column>
							<f:facet name="header"> Banned</f:facet>
							<h:outputText value="Banned" rendered="#{tk.banned}" />
							<h:outputText value="Chưa" rendered="#{not tk.banned}" />
						</h:column>
						<h:column>
							<f:facet name="header">Thao tác</f:facet>
							<div class="thaoTacCol">
								<h:commandButton
									class="deleteIcon no-border pointerCursor flowToLeft"
									process="@this" immediate="true"
									onclick="if (confirm ('Bạn có chắc chắc muốn khóa (bannick) Tài khoản này?')) return true; return false;"
									action="#{quanLyTaiKhoanBean.BanNick(tk)}"
									outcome="TrangQuanLyTaiKhoan" alt="Ban Nick" 
									rendered="#{not tk.banned}" />
								<h:commandButton
									class="editIcon no-border pointerCursor flowToLeft"
									process="@this" immediate="true" action="#" alt="Sửa" />
								<h:commandButton
									class="acceptIcon no-border pointerCursor flowToLeft"
									process="@this" immediate="true"
									onclick="if (confirm ('Bạn có chắc chắc muốn Hủy khó (Unbannick) Tài khoản này?')) return true; return false;"
									action="#{quanLyTaiKhoanBean.HuyBanNick(tk)}"
									outcome="TrangQuanLyTaiKhoan" alt="Hủy Ban Nick" 
									rendered="#{tk.banned}" />
							</div>
						</h:column>
					</h:dataTable>
				</h:panelGroup>
			</div>

		</div>
		<!-- Content -->

	</ui:define>
</ui:composition>